<form>
    <div class="row form-group">
        <div class="col-md-5">
            <div class="row form-group">
                <div class="col-md-12">
                    You can select a location then create a new LP.
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-6">
                    <label>Location<span style="color: red;">*</span></label>
                    <location-auto-complete ng-model="newLpLocation.locationId" on-select="lpLocationOnSelect(location)" name="location" allow-clear="true" required/>
                </div>
                <div class="col-md-6">
                    <label>Type <span style="color: red;">*</span></label>
                    <ui-select ng-model="newLpLocation.type" required>
                        <ui-select-match>
                            <div ng-bind="$select.selected"></div>
                        </ui-select-match>
                        <ui-select-choices repeat="item in ['ILP', 'CLP', 'SLP']">
                            {{item}}
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-6"></div>
                <div class="col-md-6">
                    <div style="margin-top: 25px;">
                        <waitting-btn btn-class="btn blue" ng-click="createNewLP()"
                                      value="'Create New LP'" is-loading="isLPCreating"></waitting-btn>
                    </div>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-12">
                    <span>{{createRes}}</span>
                </div>
            </div>
        </div>

        <div class="col-md-7">
            <div class="row form-group">
                <div class="col-md-12">
                    Empty LP without inventory list ({{notUsedLP.length}}):
                </div>
            </div>

            <div class="table-scrollable item-list-continer" style="max-height: 300px; overflow: auto;">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th style="width: 20px;"></th>
                        <th>LP</th>
                        <th>location</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="item in notUsedLP track by $index">
                        <td>{{ $index + 1 }}</td>
                        <td>
                            {{item.lpId}}
                        </td>
                        <td >
                            {{item.locationName}}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

        </div>
    </div>

</form>